.container {
  background: #e9e9e9;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  .search {
    background: #ffffff;
    padding: 32rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    position: sticky;
    top: 0;
    z-index: 100;
    .shop {
      display: flex;
      align-items: center;
      justify-content: space-between;

      box-sizing: border-box;
      font-size: 28rpx;
      .info {
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 12rpx;
        image {
          width: 114rpx;
          height: 36rpx;
          display: block;
        }
      }
      .switch {
        color: #666666;
        display: flex;
        align-items: center;
        gap: 8rpx;
        image {
          width: 10rpx;
          height: 16rpx;
          display: block;
        }
      }
    }
    .input {
      display: flex;
      align-items: center;
      gap: 15rpx;
      background: #f6f6f6;
      padding: 12rpx 20rpx;
      border-radius: 16rpx;
      font-size: 28rpx;
      input {
        width: 100%;
      }
      image {
        width: 25rpx;
        height: 25rpx;
        display: block;
        flex-shrink: 0;
      }
    }
  }
  .list {
    padding: 24rpx;
    box-sizing: border-box;
    .item {
      width: 100%;
      background: #ffffff;
      padding: 20rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      position: relative;
      overflow: hidden;
      display: flex;
      gap: 20rpx;
      .recommend {
        width: 136rpx;
        height: 38rpx;
        position: absolute;
        top: 0;
        right: 0;
      }
      .info {
        width: calc(100% - 254rpx);
        > view {
          padding: 10rpx 0;
          box-sizing: border-box;
          .name {
            font-size: 32rpx;
            color: #333333;
            font-weight: bold;
          }
          .give {
            margin-top: 10rpx;
            display: flex;
            font-size: 24rpx;
            color: #f37364;
            font-weight: bold;
            > view {
              margin-left: 8rpx;
              padding-left: 8rpx;
              font-weight: normal;
              color: #666666;
              border-left: 1px solid #e9e9e9;
            }
          }
          .data {
            display: flex;
            font-size: 24rpx;
            > view {
              margin-left: 8rpx;
              padding-left: 8rpx;
              border-left: 1px solid #e9e9e9;
            }
            text {
              color: #73F0EA;
            }
          }
          .tags {
            display: flex;
            gap: 6rpx;
            margin-top: 10rpx;
            .tag {
              font-size: 18rpx;
              padding: 5rpx 8rpx;
              border-radius: 5rpx;
              background-color: #ededed;
              color: #333333;
              box-sizing: border-box;
            }
          }
          &.bio {
            font-size: 22rpx;
            color: #666666;
            padding-bottom: 0;
            > view {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 4;
              -webkit-box-orient: vertical;
              line-height: 1.5;
              max-height: calc(22rpx * 6);
            }
          }
          & + view {
            border-top: 1px dashed #e9e9e9;
          }
        }
      }
      & + .item {
        margin-top: 16rpx;
      }
    }
  }
}